<script setup>
import { ref } from 'vue';
import AuthCommon from '@/components/auth/common.vue';
import { login } from '@/api/user'
import router from '@/router'
defineOptions({
    name: 'AuthLogin',
    inheritAttrs: true,// 是否继承父组件的属性
})
const form = ref({
    username: '',
    password: '',
})
const rules = ref({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const formRef = ref();
const handleLogin = async () => {
    try {
        await formRef.value.validate()
        console.log('登录信息:', form.value)
        // 在这里处理登录逻辑
        const [error, res] = await login(form.value);
        if (res) {
            ElMessage.success(res.msg)
            localStorage.setItem('token', res.data)
            router.push('/home')
        }
    } catch (error) {
        console.log(error)
        ElMessage.error('登录信息填写有误')
    }
}
</script>

<template>
    <div class="main-container">

        <AuthCommon>


            <template #right>
                <el-form size="large" :model="form" :rules="rules" ref="formRef"
                    class="login-form max-w-112 mx-auto shrink-0 grow basis-0 ">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item>
                        <div class="flex justify-between w-full">
                            <el-checkbox v-model="form.rememberMe" label="记住我" />
                            <el-text class="cursor-pointer" type="primary">忘记密码</el-text>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="w-full" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </AuthCommon>
    </div>
</template>

<style scoped lang="scss"></style>